{{ define "main/my-file-list.html" }}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    {{ template "views/header" . }}
</head>
<body class="animated fadeIn timo-layout-page">
<div class="page-loading">
    <div class="rubik-loader"></div>
</div>
<div class="animated fadeIn layui-card">
    <div class="layui-card-header timo-card-header">
        <span><i class="fa fa-bars"></i> 文件管理</span> <i class="layui-icon layui-icon-refresh refresh-btn"></i>
    </div>
    <div class="layui-card-body">
        <div class="layui-row timo-card-screen put-row">
            <div class="pull-right screen-btn-group">
                <div class="pull-left layui-form-pane timo-search-box layui-form">
                    <div class="layui-inline">
                        <button class="layui-btn" id="import_btn">
                            <i class="layui-icon">&#xe67c;</i>上传文件
                        </button>
                        <button class="layui-btn" id="del_btn">
                            <i class="layui-icon">&#xe640;</i>批量删除
                        </button>
                    </div>
                </div>

                <div class="btn-group-right">
                    <div class="timo-toolbar layui-form-pane timo-search-box">
                        <div class="layui-inline" id="deptInfo">
                            <label class="layui-form-label">文件名：</label>
                            <div class="layui-input-block">
                                <input id="prefix" name="prefix" value="" placeholder="文件前缀" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <button class="layui-btn timo-search-btn" id="searchBtn" data-type="reload">
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="timo-table-wrap" id="wrap-table">
            <table class="layui-table timo-table timo-table-fixed" id="dt-table" lay-filter="allAttr">
                <thead>
                <tr>
                    <th class='th'><input type="checkbox" class="checkall" id="checkAll" name="cb-check-all" /></th>
                    <th>文件名</th>
                    <th>文件大小</th>
                    <th>文件类型</th>
                    <th>修改时间</th>
                    <th>管理</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
{{ template "views/footer" . }}
<script>
    layui.use([ 'table', 'element', 'form', 'upload' ], function() {
        var table = layui.table
            , $ = layui.$
            , _upload = layui.upload
            , element = layui.element
            , form = layui.form;

        columns = [
            {
                targets: 0,
                data: null,
                className: 'timo-table-checkbox',
                orderable: false,
                render: function (data, type, full, meta) {
                    return '<input type="checkbox" id="check_' + data.id + '" class="check" name="check" value="' + data.id + '">';
                },
                width: "20px"
            },
            { data: "key", orderable: false, defaultContent: ""},
            { data: "fsize", orderable: false, defaultContent: "", width: "150px"},
            { data: "mime_type", orderable: false, defaultContent: "", width: "150px"},
            {
                data: "put_time",
                orderable: false,
                defaultContent: "",
                width: "150px",
                render: function(data, type, full, meta) {
                    return  moment(data).format("YYYY-MM-DD HH:mm:ss");
                }
            },
            {
                data: "",
                defaultContent: "",
                orderable: false,
                width: "80px",
                render: function (data, type, row) {
                    var formData = new FormData();
                    var download = buttonDownload(row['key'], row['key']);
                    var del = buttonDel(row['key']);
                    return download + del;
                }
            },
        ];
        var data = function(d){
            d.prefix = $("#prefix").val();
        };
        var $table = $('#dt-table'),
            $wrapper = $("#wrap-table");
        var config  = initTableConfig(layer, "/api/v1/myfile/list", data, columns, [ [ 3, 'asc' ], [ 1, 'asc' ] ]);
        config["drawCallback"] = drawCallback($wrapper, $table)

        var _table = $table.DataTable(config);
        $table.on("change", ":checkbox", function () {
            if ($(this).is("[name='cb-check-all']")) {
                $(":checkbox", $table).prop("checked", $(this).prop("checked"));
            } else {
                var checkbox = $("tbody :checkbox", $table);
                $(":checkbox[name='cb-check-all']", $table).prop('checked', checkbox.length === checkbox.filter(':checked').length);
            }
        });
        _upload.render({
            elem: '#import_btn' //绑定元素
            , url: '/api/v1/myfile/upload' //上传接口
            , accept: 'file'
            , multiple: true
            , done: function(res){
                parent.layer.msg("导入成功", {
                    icon : 6
                });
                _table.ajax.reload(null, false);
            }
            , error: function(){
                parent.layer.msg("导入失敗", {
                    icon : 6
                });
                _table.ajax.reload(null, false);
            }
        });

        window.download = function(id, name) {
            ajaxJsonRequest("GET", '/api/v1/myfile/download/' + name, null, function(data) {
                window.open(data.data);
                return false;
            });
            return false;
        };
        window.deleteInfo = function(name) {
            layer.confirm("确定删除吗?", {icon: 3, title: '提示'}, function (index) {//确定回调
                ajaxJsonRequest("DELETE", '/api/v1/myfile/delete/' + name, null, function(data) {
                    layer.close(index);
                    handlerResult(data, deleteDone)
                });
            }, function(index) {//取消回调
                layer.close(index);
            });
        };

        $("#searchBtn").on("click",function(){
            _table.ajax.reload();
        });

        $("#del_btn").on("click",function(){
            var $checkbox = $("tbody :checkbox", $table);
            var checkData = [];
            $checkbox.filter(':checked').each(function () {
                checkData.push(_table.row($(this).closest('tr')).data());
            });
            if (checkData.length === 0) {
                layer.msg('请选择数据');
                return false;
            }
            layer.confirm('确定删除吗?', function (index) {
                var reqBody = checkData.reduce(function(acc, cur) {
                    acc.push(cur.key);
                    return acc;
                }, []);
                ajaxJsonRequest("POST", '/api/v1/myfile/batch/delete',  JSON.stringify(reqBody), function (data) {
                    layer.close(index);
                    handlerResult(data, deleteDone)
                });
            });
            return false;
        });

        function deleteDone(data) {
            parent.layer.msg("删除成功", {
                icon : 6
            });
            _table.ajax.reload(null, false);
        }
    });
</script>
</body>
</html>
{{ end }}